window.onload = function () {
    var container = document.getElementById("container");
    var imgList = document.getElementById("imgList");
    var img = document.getElementsByTagName("img");
    var button = document.getElementById("button");
    var allA = document.getElementsByTagName("a");
    var prev = document.getElementById("prev");
    var next = document.getElementById("next");
    var arrow = document.getElementsByClassName("arrow");
    //定义变量存放动画状态
    var animated = false;
    //存放定时器
    var timer;
    //获取prev的height样式
    var height = getComputedStyle(arrow[0], null).height;

    //console.log(arrow[0].style.width);
    var index = 0;

    imgList.style.width = 620 * (img.length + 1) + "px";
    //动态设置button组的居中位置
    button.style.left = (container.offsetWidth - button.offsetWidth) / 2 + "px";
    allA[index].style.backgroundColor = "black";

    //使用js布置prev箭头和next箭头的位置
    prev.style.top = (container.offsetHeight - parseInt(height)) / 2 + "px";

    next.style.right ="0px";
    next.style.top = (container.offsetHeight - parseInt(height)) / 2 + "px";




    //创建move函数,prev值为620，next值为-620
    //left：向前left的极限值为-620px；向后left的极限值为-3720px；

    function move(offset) {
        var time = 300;
        var interval = 30;
        var speed = offset / (time / interval);
        var newLeft = parseInt(imgList.style.left) + offset;


       function go() {
            //console.log("newLeft=" + newLeft);
            //console.log("imgList.style.left=" + parseInt(imgList.style.left));


            if ((speed < 0 && newLeft < parseInt(imgList.style.left)) || (speed > 0 && newLeft > parseInt(imgList.style.left))) {
                imgList.style.left = parseInt(imgList.style.left) + speed + "px";
                //一次只能偏移62px，利用定时器不断的递归，最终实现完整的偏移

                setTimeout(go, interval);
                animated = true;
            } else {
                //imgList.style.left = parseInt(imgList.style.left) + offset + "px";
                if (newLeft > -620) {
                    imgList.style.left = -3100 + "px";
                } else if (newLeft < -3100) {
                    imgList.style.left = -620 + "px";
                }
                //console.log("imgList.style.left=" + parseInt(imgList.style.left));
                animated = false;
            }
        };
        //这里要先调用一下go函数，不然go函数无法运行
        go();
    }


    //设置自动播放功能，利用定时器实现
    function play() {
        timer = setInterval(function () {
            next.onclick();

        }, 3000)
        //console.log("play");
        
        
    }

    function stop() {
        clearInterval(timer);
        // console.log("2");

        //console.log("stop");
    }

    //创建按钮动画

    for (var i = 0; i < allA.length - 2; i++) {
        //为没意个按钮标号，方便创建单个按钮事件,利用标号实现单击按钮修改left值
        allA[i].num = i;
        allA[i].onclick = function () {
            //console.log(this.index)
            //将局部变量this.num传递给全局变量index，此时全局变量index的值已经修改
            index = this.num;
            //console.log(this.num);
            imgList.style.left = -620 * (index + 1) + "px";
            resetA();
        };
    }

    //重置相应按钮的效果
    function resetA() {
        for (var i = 0; i < allA.length - 2; i++) {
            //js会创建内联样式，优先级高于css的样式，会造成第一个按钮的效果显示不出，设置成空串即可
            //按钮还有两个prev和next
            allA[i].style.backgroundColor = "red";
        }
        allA[index].style.backgroundColor = "black";
    }





    //为左右箭头绑定点击事件
    prev.onclick = function () {
        if (!animated) {
            move(620);
            //将箭头和按钮利用全局变量index绑定在一起
            index--;
            if (index < 0)
                index = 4;
            resetA();
        }
    };
    next.onclick = function () {
        if (!animated) {
            move(-620);
            //将箭头和按钮利用全局变量index绑定在一起
            index++;
            if (index > 4)
                index = 0;
            resetA();
        }
    };

    //js中传递函数和传递函数名有什么区别？
    
    container.onmouseout = play;
    container.onmouseover = stop;
    play();
    // console.log(stop);
    // console.log(stop());
};